<script setup lang="ts">
import {onBeforeMount, ref} from 'vue';
import axios from "axios";
import qs from "qs";


let tableData = ref([]);
let page = ref(1);
let limit = ref(10);
let count = ref(1000);

async function getData() {
  axios
      .post(`data/get_data`, qs.stringify({
        page: page.value,
        limit: limit.value
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        }
      })
      .then(response => {
        tableData.value = response.data.data
        count.value = response.data.count
      })
      .catch(function (error) {
        console.log(error);
      })
}

onBeforeMount(() => {
  getData();
});

function handleCurrentChange(newPage) {
  page.value = newPage;
  getData();
}

</script>

<template>
  <div style="width: 90vw; margin-left: auto; margin-right: auto;">
    <h2>Dataset</h2>
    <el-table :data="tableData" stripe style="width: 100%; height: 65vh; overflow-y: auto">
      <el-table-column prop="id" label="id" width="100"/>
      <el-table-column prop="title" label="title"/>
      <el-table-column prop="doi" label="doi"/>
      <el-table-column prop="simle" label="simle"/>
      <el-table-column prop="radiance" label="radiance" width="100"/>
    </el-table>
    <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
                   :page-size="limit" :current-page="page" :total="count" style="margin-top: 20px"/>
  </div>
</template>

<style scoped>

</style>